<template>
  <div class="add-product">
    <h1>修改产品信息</h1>
    <div>
      <div class="product-box clearfix">
        <div class="left fl">
          <img
            width="80"
            v-if="product.imgURL"
            :src="'http://localhost:3000/images/' + product.imgURL"
            alt
          />
          <img
            width="80"
            v-else
            src="http://localhost:3000/default/default.jpg"
            alt
          />
        </div>
        <div class="right fl">
          <h5>
            <span>保险产品名称：</span>
            <strong>
              <input
                type="text"
                v-model="product.name"
                style="color: blue;"
              />
            </strong>
          </h5>
          <h5>
            <span>保险产品类别</span>：
            <strong>{{ product.classifyId.name }}</strong>
          </h5>
        </div>
      </div>
      <div class="product-box">
        <label
          for
          style="margin-right: 15px"
        >请输入产品价格:</label>
        <el-input
          v-model="product.price"
          type="number"
        ></el-input>
      </div>
      <div class="product-box">
        <label
          for
          style="margin-right: 15px"
        >请输入产品的内容描述:</label>
        <el-input
          type="textarea"
          :rows="4"
          v-model="product.information"
        ></el-input>
      </div>
      <div class="product-box">
        <label
          for
          style="margin-right: 15px"
        >请选择产品年限:</label>
        <template>
          <el-radio
            v-model="product.year"
            label="1"
          >1年</el-radio>
          <el-radio
            v-model="product.year"
            label="2"
          >2年</el-radio>
          <el-radio
            v-model="product.year"
            label="3"
          >3年</el-radio>
        </template>
      </div>
      <div class="product-box">
        <el-button
          type="text"
          @click="open"
          class="mofifybtn"
        >修改</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import api from "../../../network/apis/api";
export default {
  data() {
    return {
      product: {
        name: "",
        price: null,
        information: "",
        year: "",
        imgURL: "",
        classifyId: {},
      },
    };
  },
  created() {
    this.getUpdateOne();
  },
  methods: {
    async getUpdateOne() {
      let _id = this.$route.params._id;
      const { data } = await api.products.getOneProduct({ _id });
      if (data.status) {
        this.product = data.data;
      }
    },
    open() {
      this.$confirm("是否确认修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await api.products.modifyOnePro(this.product);
          if (data.status) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.$router.push("/admin/productList");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.add-product {
  width: 600px;
  padding: 20px 50px;
  h1 {
    margin-bottom: 15px;
  }
  .product-box {
    padding-bottom: 15px;
    label,
    span {
      font-size: 14px;
    }
    .el-input {
      width: 400px;
    }
    .el-textarea__inner {
      margin-top: 10px;
    }
    .left {
      margin-right: 50px;
    }
    .mofifybtn {
      display: inline-block;
      padding: 6px 15px;
      border: 1px solid #aaa;
      background-color: #fafafa;
    }
    .right {
      h5 {
        margin-top: 10px;
        font-weight: 100;
        font-size: 16px;
        strong {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
